
<%--
    Document   : index
    Created on : 5/Jun/2009, 5:42:11
    Author     : eurico
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="deti.es.ukni.cm.account.AccountBean"%>
<%@page import="deti.es.ukni.persistence.entity.*" %>
<%@page import="java.util.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

 <%
    AccountBean curAccount = (AccountBean) session.getAttribute("account");
 %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="../../resource/myband.css" />
        <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA-IxVtEF80D4xYMtKixTl9xTwM0brOpm-All5BF6PoaKBxRWWERTJYYYTq_EhpUWmZOadEtkHw-UC6Q"></script>

        <title>MyBand</title>
    </head>
    <body>
                <div id="header">
            <div id="logo">
                <img src="../../resource/mybandlogo.png" alt="myband_logo"/>
            </div>
        </div>

        <div id="nav">
            <% if ( curAccount == null ){ %>
            <ul>
                <li><a href="../../account/login.jsp">Login</a></li>
                <li><a href="../../account/new.jsp">Create account</a></li>
                <li><a href="../../band">Search Bands</a> </li>
            </ul>
            <%}else{%>
            <a href="../../account/logout.jsp">Logout</a>
            <ul>
                <li><a href="../../account">Account</a></li>
                <li> <a href="../../band">Friends</a></li>
                <li><a href="../../band">Your favorite bands</a></li>
                <li><a href="../../band">Search Bands</a> </li>
                <% if (curAccount.hasBand() ){ %>
                <li><a href="../new.jsp">My Band</a> </li>
                <% } %>
            </ul>
            <%}%>
        </div>
        <div id="content">
 <%
        Integer IDBand = Integer.parseInt(request.getParameter("id"));
        Band band = AccountBean.findBand(IDBand);
        if ( band == null )
            response.sendError( response.SC_NOT_FOUND );
%>
<script>
            google.load("maps", "2");
            google.load("jquery","1.3.2" );

            google.setOnLoadCallback( function(){

                $.getJSON("../../rest/band/id/<%= IDBand %>/event", function(data){
     
                    $.each( data , function(i, data){

                            if (data.length == 0) return;

                            var event   = document.createElement('div');
                            var location= document.createElement('span');
                            var dateevent= document.createElement('span');
                            var emap    = document.createElement('div');
                            var br      = document.createElement('br');
                           
                            $(event).appendTo("#bandevents");
                            $(event).attr('class', 'event');
                            $(location).appendTo( $(event) );
                            $(location).append("Description: " + data.location );
                            $(dateevent).appendTo( $(event) );
                            $(dateevent).append("Date: " + data.eventdate );

                            $(emap).appendTo($(event));
                            $(emap).attr('class', 'map');
                            $(emap).attr('lat', data.lat);
                            $(emap).attr('lng', data.lng);
                            //$(emap).css('height', '200px');
                            $(emap).height(200);

                            $(br).appendTo($(event));

                            // Create the map
                            var map = new google.maps.Map2(emap);
                            var lat = parseFloat( data.lat );
                            var lng = parseFloat( data.lng );
                            var ll  = new google.maps.LatLng(lat, lng);
                            var mark = new google.maps.Marker(ll);

                            map.addControl( new GMapTypeControl() );
                            map.addControl( new GSmallMapControl() );
                            //map.enableGoogleBar();
                            //map.enableScrollWheelZoom();
                            map.setCenter(ll, 13);
                            mark.show();
                            map.addOverlay( mark );

                    });

                });
            });
        </script>
            <div class="bands">
                <div class="view">
                    <ul>
                        <li>View Videos -g-</li>
                    </ul>
                </div>

                <div class="band">
                    <span class="name"> <%= band.getName() %></span>
                    <span class="followers">Has <%= band.getAccountCollection().size() %> follower(s)</span><br/>
                    <h2>Band Events</h2>
                    <div id="bandevents">
                        
                    </div>

                </div>
            </div>
        </div>
    </body>
</html>
